import {
    _decorator,
    Component,
    Node
} from 'cc';
const {
    ccclass,
    property
} = _decorator;

import * as cc from 'cc';
import { VMCenter } from '../framework/vm/VMCenter';
import { VMBaseAttr, VMEntity } from '../framework/vm/VMEntity';
import { JsonObserve } from '../framework/vm/JsonObserve';
import { VM } from '../framework/vm/VMMgr';

/**
 * Predefined variables
 * Name = BagDemo
 * DateTime = Thu Mar 17 2022 17:18:31 GMT+0800 (中国标准时间)
 * Author = 272493431
 * FileBasename = BagDemo.ts
 * FileBasenameNoExtension = BagDemo
 * URL = db://assets/scripts/scene/BagDemo.ts
 * ManualUrl = https://docs.cocos.com/creator/3.4/manual/zh/
 *
 */

declare global{
    type BagData = {
        name: string,
        lv: number,
        icon: string,
        value: number,
    }
}

let bagData = [{
        name: "元宝",
        lv: 1,
        icon: "icon0",
        value: 1,
    },
    {
        name: "水之源",
        lv: 3,
        icon: "icon1",
        value: 1,
    },
    {
        name: "秘籍",
        lv: 9,
        icon: "icon2",
        value: 1,
    },
    {
        name: "天书",
        lv: 4,
        icon: "icon3",
        value: 1,
    },
    {
        name: "内丹",
        lv: 2,
        icon: "icon4",
        value: 1,
    },
    {
        name: "红水晶",
        lv: 8,
        icon: "icon5",
        value: 1,
    },
    {
        name: "龙珠",
        lv: 5,
        icon: "icon6",
        value: 1,
    }, {
        name: "血瓶",
        lv: 2,
        icon: "icon7",
        value: 1,
    }, {
        name: "喇叭",
        lv: 3,
        icon: "icon8",
        value: 1,
    }, {
        name: "福袋",
        lv: 10,
        icon: "icon9",
        value: 1,
    },
];

@ccclass('BagDemo')
export class BagDemo extends Component implements IMVVM{
    _vmTag: string = "BagDemo";
    _vmEntitys: VMEntity[];

    @property(cc.Node)
    panel: cc.Node = null;

    @property(cc.Node)
    panel2: cc.Node = null;

    data = {
        items: [...bagData],
        arr: [5,42,3,41,2,3,4,5,6,7],
        val: 1,
    }


    start() {

        // new JsonObserve(this.data,this._callback.bind(this));
    }
    // _callback(_newValue: any, _oldValue: any, path: readonly string[]){
    //     console.log(`BagDemo-> `,this.data.arr.join('.'));
    // }
    onEnable(){
        VMCenter.add(this.data,this);

        VMCenter.Event(this,this.panel2,{watchPath: "*.items",onChangeEvent(opts){
            
        }});

        
        // VMCenter.Event(this,this.panel2,{watchPath: "*.items.1",onChangeEvent(opts){
            
        //     console.log(`BagDemo-> `,JSON.stringify(opts.newValue));
            
        //     // console.log(`BagDemo-> `,JSON.stringify(opts.newValue));
            
        // }});


        for (let i = 0; i < this.data.items.length; i++) {
            const idx = i;
            VMCenter.Event(this,this.panel2,{watchPath: `*.items.${idx}`,onChangeEvent(opts){
                
                console.log(`BagDemo->${idx} `,JSON.stringify(opts.newValue));
                
                // console.log(`BagDemo-> `,JSON.stringify(opts.newValue));
                
            }});
        }
    }



    onDisable(){
        VMCenter.remove(this);
    }


    // 拾取
    onClickPickUp(){
        
        // //  unshift push 会通知 到数组 *.items ，当观察的元素索引位置 为 undefined 时，首次赋值不会通知到 观察者，再次赋值不同的值才会通知
        // this.data.items.unshift(bagData.shift());
        // this.data.items.push(bagData.shift());
        // //  pop 只会通知到 数组 *.items
        // this.data.items.pop();
        // // shift  会通知 到数组 *.items 和所有被观察的元素索引  *.items.${index}
        // this.data.items.shift();

        // // reverse 会通知到数组 *.items 和所有被观察的元素索引  *.items.${index}
        // this.data.items.reverse();
        
        // // reverse 会通知到数组 *.items 以及 start 以后 length-deleteCount 的元素索引  splice(2,3) 为通知到 第 2,3,4,5,6 个元素
        this.data.items.splice(2,3);

        // // // sort 会通知到 数组(*.items) 和观察的 数组元素(*.item.1)
        // let itm = this.data.items.sort((a,b)=>{
        //     return a.lv - b.lv;
        // });

        // // 直接赋值 只会通知到 数组  *.items
        this.data.items = bagData;




        // console.log(`BagDemo-> ${JSON.stringify(itm)}`);
        // this.data.arr.sort((a,b)=>{
        //         return a - b;
        //     });

        
        // 在使用
        // this.data.items[0] = bagData[5];
        // this.data.arr = [11,2];
    }

    // 扔掉
    onClickThrow(){

    }



}